<template>
    <div class="customerAccountInfo">
      <div class="customerAccountInfo-header">
        <van-row>
          <van-col span="24"><van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;font-weight: bold;" @click="timePopup=true" >时间筛选 <i class="iconfont icon-xia"></i></van-button></van-col>
        </van-row>
        <p class="customerAccountInfo-p">{{header}}</p>

        <card style="border-top:0;font-weight: bold">
          <div slot="content" class="card-demo-flex card-demo-content01">
            <div class="vux-1px-r">
              <span :style="{color:color}">{{recharge}}</span>
              <br/>
              充值
            </div>
            <div class="vux-1px-r">
              <span :style="{color:color}">{{withdrawing}}</span>
              <br/>
              扣款
            </div>
            <div class="vux-1px-r" >
              <span :style="{color:color}">{{balance}}</span>
              <br/>
              余额
            </div>
          </div>
        </card>

        <!--时间弹层-->
        <van-popup v-model="timePopup" @click-overlay="getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev" class="time_mask" >
          <van-cell-group style="padding:5px 0!important;">
            <van-cell title="开始时间" is-link :value="getCurrentDate" @click="showStartTimePopup"/>
          </van-cell-group>
          <van-cell-group style="padding:5px 0!important;">
            <van-cell title="结束时间" is-link :value="getEndCurrentDate" @click="showEndTimePopup"/>
          </van-cell-group>
          <!--按钮-->
          <van-row class="mask-btn" style="">
            <van-col span="12" style="padding:0 10px;">
              <van-button class="mask-btnclose"  @click="timePopup=false,getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev">取消</van-button>
            </van-col>
            <van-col span="12" style="padding:0 10px;">
              <van-button  type="primary" class="mask-btnclose" @click="getList">确定</van-button>
            </van-col>
          </van-row>
        </van-popup>


      </div>

      <!--开始时间的弹出层-->
      <van-popup v-model="startPopupShow" class="mask-sTime" style="">
        <van-datetime-picker
          class="pickerTime"
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="startTimeFn"
          @cancel="closestartPopup"
        />
      </van-popup>
      <!--结束时间的弹出层-->
      <van-popup v-model="endPopupShow" class="mask-sTime" >
        <van-datetime-picker
          class="pickerTime"
          v-model="endCurrentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="endTimeFn"
          @cancel="closeEndPopup"
        />
      </van-popup>

      <div class="customerAccountInfo-list" >

        <van-list
          v-model="loading"
          :finished="finished"
          @load="getCustomerAccountInfo"
        >
          <van-row v-if="typeof customerAccountInfoList=='string'" class="list-dats">
            <van-col span="24" style="color:#ddd;padding:10px 0;background: #fff!important;">
              {{customerAccountInfoList}}
            </van-col>
          </van-row>

          <van-row v-else v-for="(item,index) in customerAccountInfoList" :key="index" style="padding:10px;background: #fff!important;margin:5px 0;">
            <van-col span="24" style="text-align: left;padding:3px 0;">
              {{item.pay_date}}
            </van-col>
            <van-col span="24" style="text-align: left;padding:3px 0;">
              账户:{{item.customer.account_name}}
            </van-col>
            <van-col span="24" style="text-align: left;padding:3px 0;">
              余额: <span :style="{color:color}">￥{{item.balance}}</span>
            </van-col>
            <van-col span="12" style="text-align: left;padding:3px 0;">
              备注: {{item.abstract}}
            </van-col>
            <van-col span="12" style="text-align: right;padding:3px 0;">
              <span v-if="item.money>0" :style="{color:color}">+{{item.money}}</span>
              <span v-else style="color:red">{{item.money}}</span>
            </van-col>

          </van-row>
          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>




      </div>

      <!--返回按钮-->
      <backs></backs>

    </div>
</template>


<script>
  import { Divider, Card } from 'vux';
  import backs from "@/components/menu/backPrev";

    export default {
        name: "customerAccountInfo",
        components: {
          Card,
          Divider,
          backs
        },
        data(){
          return {
            color:'#0D90EB',//主题色，字体色
            header:"",
            block:"none",
            recharge:0,//充值
            withdrawing:0,//扣款
            balance:0,//余额
            customerAccountInfoList:[],
            satrtTime:"",
            endTime:"",
            curPage:1,
            pageSize:20,
            pageAll:0,

            //时间弹出层
            timePopup:false,


            startPopupShow:false,//开始时间的弹出层
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2015,0,1),
            maxDate: new Date(2050,12,31),
            currentDate: {},//当前时间
            getCurrentDate:"",
            getCurrentDatePrev:"",//记录上一次的值

            endPopupShow:false,//结束时间的弹出层
            endCurrentDate: {},//本月的最后一天的时间
            getEndCurrentDate:"",
            getEndCurrentDatePrev:"",//记录上一次的值

            loading: false,
            finished: false,

          }
        },
      methods:{
        getList(){
          this.timePopup=false;
          this.block = 'none'
          this.customerAccountInfoList=[];
          this.loading=true;
          this.finished=false;
          this.curPage=1;
          this.getCustomerAccountInfo();
        },
          //获取用户资金明细
        getCustomerAccountInfo(){
            this.header=this.$route.params.name+"-资金明细";
            var $this=this;
            this.$http.capital.post('/customerRecord/accountInfo',{
              count: 1,
              curPage: $this.curPage,
              customer_account_id: $this.$route.params.account_id,
              customer_id: $this.$route.params.customer_id,
              edate: $this.getEndCurrentDate,
              keyword: "",
              pageSize: $this.pageSize,
              sdate: $this.getCurrentDate,
              select_type: 0,
              sizes: [20, 40, 60, 100],
              zhaiyao: "",
            })
              .then(function (response) {
                // console.log(response.data.data);
                  $this.curPage++;
                  $this.recharge=(response.data.data.chongzhi).toFixed(2);
                  $this.withdrawing=(Math.abs(response.data.data.koukuan)).toFixed(2);
                  $this.balance=(response.data.data.chongzhi+response.data.data.koukuan).toFixed(2);
                  // console.log($this.balance);
                for (let i = 0; i < response.data.data.info.length; i++) {
                  $this.customerAccountInfoList.push(response.data.data.info[i]);
                }
                $this.loading = false;

                // console.log($this.customerAccountInfoList)
                if(!response.data.data.info.length){
                  $this.customerAccountInfoList="暂无记录";
                  $this.finished = true;
                }else if ($this.customerAccountInfoList.length >= response.data.data.allcount
                ) {
                  $this.finished = true;
                  $this.block = 'block'
                }


                // $this.customerAccountInfoList=response.data.data.info;

              })
              .catch(function (error) {
                console.log(error);
              });
          },
        //显示开始时间的弹出层
        showStartTimePopup(){
            this.startPopupShow=true;
        },
        //显示结束时间的弹出层
        showEndTimePopup(){
            this.endPopupShow=true;
        },
        //给开始、结束时间赋值
        getNowTime(){
          //获取开始时间
          var myDate = new Date();
          var mytime=myDate.getMonth();
          var y=myDate.getFullYear();

          this.currentDate=new Date(y,mytime,1);

          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;
          //获取选择的当前时间
          this.getCurrentDate=y + '-' + m + '-' + d+" 00:00:00";
          this.getCurrentDatePrev=y + '-' + m + '-' + d+" 00:00:00";

          //结束时间
          this.endCurrentDate=new Date(y,mytime+1,0);
          var y2 = this.endCurrentDate.getFullYear();
          var m2 = this.endCurrentDate.getMonth() + 1;
          m2 = m2 < 10 ? '0' + m2 : m2;
          //构造一个日期对象：获取当月的最后一天
          var day = new Date(y2,m2,0);
          //获取天数：
          var d2 = day.getDate();
          //获取选择的结束时间
          this.getEndCurrentDate=y2 + '-' + m2 + '-' + d2+" 23:59:59";
          this.getEndCurrentDatePrev=y2 + '-' + m2 + '-' + d2+" 23:59:59";
        },
        //点击开始时间的确定按钮
        startTimeFn(){
          this.startPopupShow=false;//隐藏弹出层
          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;

          var hour = this.currentDate.getHours() < 10 ? "0" + this.currentDate.getHours() : this.currentDate.getHours();
          var minute = this.currentDate.getMinutes() < 10 ? "0" + this.currentDate.getMinutes() : this.currentDate.getMinutes();
          //获取选择的当前时间
          this.getCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":00";

          // this.getCustomerAccountInfo();
        },
        //点击结束时间的确定按钮
        endTimeFn(){
          this.endPopupShow=false;//隐藏弹出层
          var y = this.endCurrentDate.getFullYear();
          var m = this.endCurrentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.endCurrentDate.getDate();
          d = d < 10 ? ('0' + d) : d;

          var hour = this.endCurrentDate.getHours()<10 ? '0'+ this.endCurrentDate.getHours() : this.endCurrentDate.getHours();
          var minute = this.endCurrentDate.getMinutes() < 10 ? "0" + this.endCurrentDate.getMinutes() : this.endCurrentDate.getMinutes();
          //获取选择的时间
          this.getEndCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":59";

          // this.getCustomerAccountInfo();
        },
        //关闭开始时间的弹出层
        closestartPopup(){
          this.startPopupShow=false;
        },
        //关闭结束时间的弹出层
        closeEndPopup(){
          this.endPopupShow=false;
        }
      },
      mounted(){
          this.getNowTime();
          // this.getCurrentDate=this.$route.params.sdate;
          // this.getEndCurrentDate=this.$route.params.edate;
          // this.getCustomerAccountInfo();

        //   var s = this.getEndCurrentDate.substring(this.getEndCurrentDate.indexOf(' ')+1,this.getEndCurrentDate.length);
        //   var ss = s.split(":");
        // this.getEndCurrentDate = this.getEndCurrentDate.substring(0,this.getEndCurrentDate.indexOf(' '))+' '+ss[0]+':'+(parseInt(ss[1]))+':'+ss[2]
      }
    }
</script>

<style scoped lang="less">
  @import '~vux/src/styles/1px.less';
  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;

  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .card-demo-flex span {
    color: #f74c31;
  }

  .customerAccountInfo .van-row{
    font-size:14px;
  }
  .customerAccountInfo .van-row>.van-col{
    -padding:3px 0;
  }
  .vux-1px-r[data-v-42878e68]:after{
    border-right: 0!important;
  }
  .vux-1px-r{
    border-right:1px solid rgb(229, 229, 229);
  }
  .vux-1px-r:last-child{
    border-right:0;
  }
  .customerAccountInfo-p{
    font-size:16px;
    margin:10px 0;
    color:#2c3e50;
  }
  .customerAccountInfo .van-popup{
    width:100%;
  }
  .customerAccountInfo-header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    font-size:16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .customerAccountInfo-list{
    margin-top:158px;

  }
  .customerAccountInfo .van-cell{
    text-align: left;
    font-size:12px;
    padding:5px 15px!important;
  }

  .weui-panel:before{
    border-top:0;
  }
  .noDatas{
    font-weight: bold;
  }
  .time_mask{
    width:320px!important;padding:5px 0;background: #fff!important;border-radius: 5px;
  }
  .mask-btn{
    padding:10px 0;
  }
  .mask-btnclose{
    width:100%;height:38px;line-height: 38px;
  }
  .mask-sTime{
    width:320px!important;border-radius: 3px;
  }
  .pickerTime{
    font-size:16px!important;
  }








</style>
